<template>
	<view class="pages-home" v-if="isLoad">

		<!-- <uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="首页" color="#ffffff">
		</uni-nav-bar> -->
		<!-- #ifdef APP-PLUS -->
		<view :style="{height:`${configInfo.navBarHeight}px`}" class="topbar">首页</view>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<!-- #endif -->
		<!-- :style="{height:banner.length > 0?`484rpx`:`84rpx`}" -->
		<!-- @tap.stop="ccc" -->
		<view style="width: 96%;height: 120rpx;margin: 2%;">
			<image :src="index_img_url" style="width: 100%;height: 100%;" mode="scaleToFill" @tap.stop="goRich(1)">
			</image>
		</view>
		<view :class="[{'rel':banner.length >0}]" style="margin: 2%;">

			<banner @change="goBanner" :list="banner" :margin="0" :autoplay="true" :indicatorActiveColor="primaryColor"
				:dotWidth="20" :dotBottom="30" v-if="banner.length > 0">
			</banner>
			<!-- :class="[{'mt-md':banner.length ==0},{'abs':banner.length>0}]" -->
			<!-- <view class="search-box flex-center fill-base" :style="{ color: primaryColor }">
				<view style="width: 100%;">
					<view class="servetip pl-lg pr-lg pt-sm pb-sm">
						<view @tap.stop="toJump('servefc', index)" v-for="(item, index) in servefc" :key="index"
							class="servefc">
							<i class="iconfont" :class="item.icon"></i>
							<span class="ml-sm">{{ item.text }}</span>
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<!-- 千创商城 -->
		<view class="padding-tb-30 padding-lr-20 bg-ff radius-10 margin-15 ">
			<view class="topT u-flex" style="justify-content: center;align-items: center" @click="$func.jump('/wNew/pages/index')">
				<!-- <image src="../static/index/malltit.png" mode="" class="titimg"></image> -->
				<image src="../static/homeLogo.png" mode="" class="titimg"></image>
				<view class="text-30 text-bold margin-lr-15" style="line-height: normal !important">千创商城</view>
				<!-- <image src="../static/index/malltit.png" mode="" class="titimg"></image> -->
			</view>
			<view class="flex align-center justify-between margin-top-20">
				<block v-for="(item,index) in classifyList" :key="index">
					<view class="aaa-item" @click.stop="$func.jump('/wNew/pages/classify?id='+item.id)">
						<image :src="item.image" class="flimg" />
						
						<view class="name aaa-one">{{item.name}}</view>
					</view>
				</block>
				
				<view class="aaa-item" @click.stop="$func.jump(`/wNew/pages/classification?type=1&cType=${true}&showBack=show`)">
					<image src="../static/index/mallmore.png" class="flimg" />
					
					<view class="name aaa-one">更多</view>
				</view>
			</view>
		</view>
		<!-- 千创到家 -->
		<view class="padding-tb-30 padding-lr-20 bg-ff radius-10 margin-15 " v-if="configInfo.ps_switch!=1">
			<view class="topT u-flex" style="justify-content: center;align-items: center" @click="$func.jump('/wNew/pages/fuwu')">
				<image src="../static/homeLogo.png" mode="" class="titimg"></image>

				<!-- <image src="../static/index/fwtit.png" mode="" class="titimg"></image> -->
				<view class="text-30 text-bold margin-lr-15" style="line-height: normal !important">到家服务</view>
				<!-- <image src="../static/index/fwtit.png" mode="" class="titimg"></image> -->
			</view>
			<view class="flex align-center justify-between margin-top-20">
				<block v-for="(item,index) in qcdj" :key="index">
					<view class="aaa-item" @click.stop="$func.jump('/wNew/pages/fuwucate?id='+item.id)">
						<image :src="item.cover" class="flimg" />
						
						<view class="name aaa-two">{{item.title}}</view>
					</view>
				</block>
				
				<view class="aaa-item" @click.stop="$func.jump('/wNew/pages/classification?type=2')">
					<image src="../static/index/fwmore.png" class="flimg"/>
					
					<view class="name aaa-two">更多</view>
				</view>
			</view>
		</view>
		<!-- 千创点评 -->
		<view class="padding-tb-30 padding-lr-20 bg-ff radius-10 margin-15" @click.stop="showModal">
			<view class="topT u-flex" style="justify-content: center;align-items: center">
                 <!-- @click.stop="$func.jump('/wNew/pages/life')" -->
				<image src="../static/homeLogo.png" mode="" class="titimg"></image>

				<!-- <image src="../static/index/dpl.png" mode="" class="titimg"></image> -->
				<view class="text-30 text-bold margin-lr-15" style="line-height: normal !important">本地生活</view>
				<!-- <image src="../static/index/dpr.png" mode="" class="titimg"></image> -->
			</view>
			<view class="flex align-center justify-between margin-top-20">
				<image src="../static/index/dp1.png" mode="" class="flimg"></image>
				<image src="../static/index/dp2.png" mode="" class="flimg"></image>
				<image src="../static/index/dp3.png" mode="" class="flimg"></image>
				<image src="../static/index/dpmore.png" mode="" class="flimg"></image>
			</view>
		</view>
		<!-- 分类 -->
		<!-- <view class="fill-base pl-md pr-md" style="overflow: hidden;" v-if="service_cate.length>0">
			<column @change="goCate" :list="service_cate" :indicatorActiveColor="primaryColor" :colNum="5" :rowNum="2">
			</column>
		</view>
		<view class="classify u-flex u-flex-wrap u-row-between">
			<view class="u-flex-col u-col-center cla_item" @click="goClass(item.id)" v-for="item in classifyList">
				<image :src="item.image"></image>
				{{item.name}}
			</view>
		</view> -->
		<!-- 我的足迹 -->
		<view class="fill-base pl-lg pr-lg pb-lg margin-15 padding-tb-30 radius-10"
			v-if="recommend_list && recommend_list.length > 0">
			<view class="flex-between pb-lg">
				<view class="f-st-title text-bold flex-between">
					<view class="mr-md" style="width: 15px;height: 17px;">
						<image src="../static/index/zj.png" class="van-img" style="object-fit: cover;"></image>
					</view>
					<!-- {{`推荐${$t('action.attendantName')}`}} -->
					我的足迹
				</view>
				<!-- <view class="flex-y-center f-caption c-caption">查看更多<i class="iconfont icon-right"
								style="font-size: 24rpx;"></i></view> @tap.stop="toTechnician(index)" -->
			</view>
			<scroll-view scroll-x class="recommend-technician">
				<block v-for="(item,index) in footprintlist" :key="index" @tap.stop="goFoot(item.id,item.type,item.service_id)">
					<view class="recommend-item type-1" @tap.stop="goFoot(item.id,item.type,item.service_id)">
						<!-- #ifdef H5 -->
						<view class="cover radius-16">
							<view class="h5-image cover radius-16" :style="{ backgroundImage : `url('${item.image}')`}">
							</view>
						</view>
						<!-- #endif -->
						<!-- #ifndef H5 -->
						<image mode="aspectFill" lazy-load class="cover radius-16" :src="item.image"></image>
						<!-- #endif -->
						<view class="flex-center f-desc c-title text-bold mt-md">
							<view class="ellipsis">{{item.title}}</view>
						</view>
						<!-- <view class="flex-center">
									<view class="new-technician flex-center f-icontext radius"
										:style="{height:`33rpx`,width:`80rpx`,color:primaryColor,border:`1rpx solid ${primaryColor}`}"
										v-if="item.is_new">新人
									</view>
									<view class="f-icontext c-caption" v-else>30天接单{{item.order_count||0}}
									</view>
								</view> -->
					</view>
				</block>
			</scroll-view>
		</view>
		<!-- 千创商城推荐 -->
		<view class="padding-tb-30 padding-lr-20 margin-15 bg-ff radius-10 flex align-center"
			@click="$func.jump('/wNew/pages/index')">
			<view class="flex align-center flex-one">
				<image src="../static/index/fwtit.png" mode="" class="titimg"></image>
				<view class="text-30 text-bold margin-lr-15 text-ce">千创商城</view>
				<image src="../static/index/fwtit.png" mode="" class="titimg"></image>
			</view>
			<view class="flex-y-center f-caption c-caption text-24">更多商品<i class="iconfont icon-right"
					style="font-size: 24rpx;margin-left: 10rpx;"></i></view>
		</view>
		<view class="listbox margin-lr-20">
			<view class="demo-warter" @click="$func.jump('/wNew/pages/detail?id=' + item.id)"
				v-for="(item, index) in dilist" :key="index" v-if="index<4">
				<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
				<view style="margin-top: 20rpx;">
					<text class="mark" v-if="item.shop.isself == 1">平台</text>
					<text class="mark markOra" v-else>商家</text>
					<text class="mark markOra" v-if="item.platform_ms == 1">秒杀</text>
					<text class="mark markOra" v-if="item.platform_bk == 1">折扣</text>
					<text style="line-height: 40rpx;">{{item.title}}</text>
				</view>
				<view class="demo-tag">
					<view class="demo-tag-text" v-for="(items,indexs) in item.json" :key="indexs">
						{{items}}
					</view>
				</view>
				<view class="demo-price">
					<text>￥</text>{{item.price}}
					<text class="demo-price-grey">￥{{item.hx_price}}</text>
				</view>
				<view class="flex align-center">
					<view class="demo-shop" @click.stop="$func.jump('/wNew/pages/store?id=' + item.shop_id)">
						<image src="../static/wImg/home.png"></image>
						<view style="height: 20rpx;line-height: 23rpx;">{{item.shop.shopname}}</view>
						<u-icon name="arrow-right" color="#999"></u-icon>
					</view>
					<view class="flex align-center flex-one justify-end" v-if="item.shop.is_zb==1">
						<image src="../static/index/zb.png" mode="" class="zbimg"></image>
						<view class="text-20 margin-left-10" style="color: #F76B1C;">直播中</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 上门服务 -->
		<view class="padding-tb-30 padding-lr-20 margin-20 bg-ff radius-10 flex align-center"
			@click="$func.jump('/wNew/pages/fuwu')" v-if="configInfo.ps_switch!=1">
			<view class="flex align-center flex-one">
				<image src="../static/index/fwtit.png" mode="" class="titimg"></image>
				<view class="text-30 text-bold margin-lr-15 text-ce">上门服务</view>
				<image src="../static/index/fwtit.png" mode="" class="titimg"></image>
			</view>
			<view class="flex-y-center f-caption c-caption text-24">更多服务<i class="iconfont icon-right"
					style="font-size: 24rpx;margin-left: 10rpx;"></i></view>
		</view>
		<view class="padding-lr-20 padding-tb-30 bg-ff radius-10 flex align-center margin-20"
			v-for="(item,index) in servicelist" :key="index" @click="foFuwu(item.id)" v-if="configInfo.ps_switch!=1">
			<image :src="item.cover" mode="" class="amimg"></image>
			<view class="flex-one margin-left-20">
				<view class="flex align-center">
					<view class="flex-one text-30 text-bold">{{item.title}}</view>
					<view class="text-24 text-cb">{{item.total_sale}}人已体验</view>
				</view>
				<view class="flex align-center margin-top-25">
					<view class="text-a3 text-26">{{item.sub_title}}</view>
				</view>
				<view class="flex align-end margin-top-15">
					<view class="flex align-end flex-one">
						<view class="amtime">{{item.time_long}}分钟</view>
						<view class="text-40 height-45 margin-left-10"> <text class="text-26">￥</text>{{item.price}}
						</view>
						<view class="text-26 text-cb text-del height-30 margin-left-10">￥{{item.init_price}}</view>
					</view>
					<view class="amdetail">查看详情</view>
				</view>
			</view>
		</view>
		<!-- 千创商城 -->
		<view class="padding-tb-30 padding-lr-20 margin-20 bg-ff radius-10 flex align-center"
			@click="$func.jump('/wNew/pages/life')">
			<view class="flex align-center flex-one">
				<image src="../static/index/fwtit.png" mode="" class="titimg"></image>
				<view class="text-30 text-bold margin-lr-15 text-ce">本地生活</view>
				<image src="../static/index/fwtit.png" mode="" class="titimg"></image>
			</view>
			<view class="flex-y-center f-caption c-caption text-24">更多商品<i class="iconfont icon-right"
					style="font-size: 24rpx;margin-left: 10rpx;"></i></view>
		</view>
		<view class="margin-20 padding-20 bg-ff radius-10 flex align-center">
			<image src="../static/logo.png" mode="" class="shimg"></image>
			<view class="flex-one margin-left-25">
				<view class="text-30 text-bold">喜家德虾仁水饺（观江店）</view>
				<view class="flex align-center margin-top-10">
					<i class="iconfont iconyduixingxingshixin icon-font-color"
						:style="{backgroundImage: aindex< 3?`-webkit-linear-gradient(270deg, #F46C22 0%, #F46C22 100%)`:`-webkit-linear-gradient(270deg, #f4f6f8 0%, #ccc 100%)`}"
						v-for="(aitem,aindex) in 5" :key="aindex"></i>
					<view class="text-24 margin-left-15">￥18/人</view>
				</view>
				<view class="margin-top-10 text-24 text-a3 text-cut-one">
					松浦大桥88424号这是地址...
				</view>
				<view class="text-24 text-a3 margin-top-10">2151人评价</view>
			</view>
		</view>
		<view class="bg-ff padding-30" v-if="false">
			<view class="flex align-center">
				<view class="line"></view>
				<view class="text-30 margin-left-10">平台优选</view>
			</view>
			<scroll-view scroll-x class="recommend-technician margin-top-30">
				<block v-for="(item,index) in flowList" :key="index" @tap.stop="godetail(item.id)">
					<view class="recommend-item type-1">
						<!-- #ifdef H5 -->
						<view class="cover radius-16" @click="godetail(item.id)">
							<view class="h5-image cover radius-16" :style="{ backgroundImage : `url('${item.image}')`}">
							</view>
						</view>
						<!-- #endif -->
						<!-- #ifndef H5 -->
						<image mode="aspectFill" lazy-load class="cover radius-16" :src="item.image"
							@click="godetail(item.id)"></image>
						<!-- #endif -->
						<view class="flex-center f-desc c-title text-bold mt-md" @click="godetail(item.id)">
							<view class="ellipsis">{{item.title}}</view>
						</view>
						<view class="text-center text-26" style="color: #F76B1C;">￥{{item.price}}</view>
					</view>
				</block>
			</scroll-view>
		</view>
		<view class="bg-ff padding-30" v-if="false">
			<view class="flex align-center">
				<view class="line"></view>
				<view class="text-30 margin-left-10">地方商家</view>
			</view>
			<scroll-view scroll-x class="recommend-technician margin-top-30">
				<block v-for="(item,index) in dilist" :key="index" @tap.stop="godetail(item.id)">
					<view class="recommend-item type-1">
						<!-- #ifdef H5 -->
						<view class="cover radius-16" @click="godetail(item.id)">
							<view class="h5-image cover radius-16" :style="{ backgroundImage : `url('${item.image}')`}">
							</view>
						</view>
						<!-- #endif -->
						<!-- #ifndef H5 -->
						<image mode="aspectFill" lazy-load class="cover radius-16" :src="item.image"
							@click="godetail(item.id)"></image>
						<!-- #endif -->
						<view class="flex-center f-desc c-title text-bold mt-md" @click="godetail(item.id)">
							<view class="ellipsis">{{item.title}}</view>
						</view>
						<view class="text-center text-26" style="color: #F76B1C;">￥{{item.price}}</view>
					</view>
				</block>
			</scroll-view>
		</view>
		<!-- <view class="fill-base pl-lg pr-lg">	
			<view class="fill-base flex-between">
				<view class="f-st-title text-bold flex-between">
					<view class="mr-md" style="width: 15px;height: 17px;">
						<image src="/static/img/icon_project.png" class="van-img" style="object-fit: cover;"></image>
					</view>
					推荐项目
				</view>
			</view>
		</view> -->
		<!-- <view class="fill-base pd-lg b-1px-b" v-for="(item,index) in list.data" :key="index">
			<service-list-item :info="item"></service-list-item>
		</view> -->

		<!-- <load-more :noMore="list.current_page >= list.last_page && list.data.length > 0" :loading="loading"
			v-if="loading">
		</load-more> -->
		<!-- <abnor v-if="!loading && list.data.length <= 0 && list.current_page == 1"></abnor> -->

		<view class="space-footer"></view>

		<uni-popup ref="coupon_item" type="center" :maskClick="false">
			<view class="coupon-popup flex-center">
				<!-- #ifdef H5 -->
				<view class="h5-image bg-img"
					:style="{ backgroundImage : `url('https://lbqnyv2.migugu.com/bianzu3.png')`}">
				</view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<image mode="aspectFill" lazy-load class="bg-img" src="https://lbqnyv2.migugu.com/bianzu3.png"></image>
				<!-- #endif -->

				<i @tap.stop="$refs.coupon_item.close()" class="iconfont icon-close c-base"></i>
				</image>
				<view class="coupon-info flex-center flex-column">
					<view class="tops flex-center flex-column">
						<view class="">
							成功领取
						</view>
						<view class="">
							卡券将放入“我的-我的卡券”
						</view>
					</view>
					<view class="lists flex-center">
						<scroll-view scroll-y style="width: 420rpx;height:100%;">
							<view class="list flex-between" v-for="(item, index) in couponList" :key="index">
								<image src="https://lbqny.migugu.com/admin/anmo/coupon/coupon.png" mode="aspectFill">
								</image>
								<view class="flex-between">
									<view class="flex-center flex-column">
										<view class="price">
											{{item.discount}}
										</view>
										<view class="price_text">
											{{item.full*1>0?`满${item.full}可用`:`立减`}}
										</view>
									</view>
									<view class="title flex-y-center">
										<view class="ellipsis-3">
											{{item.title}}
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="btns flex-center" @tap.stop="userGetCoupon">
					<view class="flex-center">
						领取到卡包
					</view>
				</view>
			</view>
		</uni-popup>
		<view :style="{height: `${configInfo.tabbarHeight}px`}"></view>
		<tabbar :cur="1"></tabbar>

		<!-- #ifdef APP-PLUS -->
		<login-info></login-info>
		<!-- #endif -->
	</view>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import siteInfo from "@/siteinfo.js";
import serviceListItem from "@/components/service-list-item.vue";
import tabbar from "@/components/tabbar.vue";
export default {
    components: {
        serviceListItem,
        tabbar,
    },
    data() {
        return {
            couponList: [], //优惠券
            isLoad: false,
            options: {},
            loading: true,
            lockTap: false,
            index_img_url: "",
            servefc: [
                {
                    icon: "icon-kzj",
                    text: "实名认证",
                },
                {
                    icon: "icon-kpk",
                    text: "爽约包赔",
                },
                {
                    icon: "icon-sybp",
                    text: "超时秒退",
                },
                {
                    icon: "icon-kzz",
                    text: "资质证书",
                },
            ],
            flowList: [],
            dilist: [],
            footprintlist: [],
            classifyList: [],
            servicelist: [],
            qcdj: [],
            banner: [],
            recommend_list: [],
        };
    },
    computed: mapState({
        pageActive: (state) => state.service.pageActive,
        activeIndex: (state) => state.service.activeIndex,
        tabList: (state) => state.service.tabList,
        param: (state) => state.service.param,
        list: (state) => state.service.list,
        // banner: state => state.service.banner,
        service_cate: (state) => state.service.service_cate,
        // recommend_list: state => state.service.recommend_list,
        recommend_style: (state) => state.service.recommend_style,
        primaryColor: (state) => state.config.configInfo.primaryColor,
        subColor: (state) => state.config.configInfo.subColor,
        configInfo: (state) => state.config.configInfo,
        autograph: (state) => state.user.autograph,
        userInfo: (state) => state.user.userInfo,
        location: (state) => state.user.location,
        isGzhLogin: (state) => state.user.isGzhLogin,
        haveShieldOper: (state) => state.user.haveShieldOper,
    }),
    async onLoad(options) {
        let location = {
            lng: "126.56279",
            lat: "45.80825",
            address: "定位失败",
            province: "",
            city: "",
            district: "",
        };
        uni.setStorageSync("location", location);
        console.log(this.banner, "轮播图");
        this.index_img_url = uni.getStorageSync("configInfo").index_img_url;

        this.$util.showLoading();
        options = await this.updateCommonOptions(options);
        this.options = options;
        uni.onNetworkStatusChange((res) => {
            let { isConnected } = res;
            if (isConnected && !this.pageActive) {
                this.initIndex();
                return;
            }
        });
        await this.initIndex();
    },
    onReady() {
        // this.$u.post('/api/index/likes', {
        // 	page: 1,
        // 	location_city: uni.getStorageSync('city') ? uni.getStorageSync('city') : '北京/北京市',
        // 	type: 1
        // }).then(res => {
        // 	this.flowList = res.data.data; //追加新数据
        // })
        // this.$u.post('/api/index/likes', {
        // 	page: 1,
        // 	location_city: uni.getStorageSync('city') ? uni.getStorageSync('city') : '北京/北京市',
        // 	type: 2
        // }).then(res => {
        // 	this.dilist = res.data.data; //追加新数据
        // })
        // 我的足迹 商城数据

        //商城分类
        // this.$u.post('/api/index/get_index_category', {
        // 	location_city: uni.getStorageSync('city')
        // }).then(res => {
        // 	if (res.code == 1) {
        // 		this.classifyList = res.data
        // 	}
        // });
        this.$u.post("/api/index/getPlatformShop", {}).then((res) => {
            if (res.code == 1) {
                this.dilist = res.data.goods; //追加新数据
                this.classifyList = res.data.category;
            }
        });
    },
    async onShow() {
        // #ifdef H5
        if (this.$jweixin.isWechat()) {
            await this.$jweixin.initJssdk();
            this.toAppShare();
        }
        // #endif
        if (this.haveShieldOper == 2) {
            this.initIndex();
            this.updateUserItem({
                key: "haveShieldOper",
                val: 0,
            });
        }
        if (this.pageActive && this.userInfo.id) {
            this.getCouponList();
        }
        let res = await this.$api.service.getIndexService({
            lat: this.location.lat,
            lng: this.location.lng,
        });
        console.log(res, "服务");
        this.servicelist = res.service;
        this.qcdj = res.cate;
        this.banner = res.banner;
        this.recommend_list = res.recommend_list;
        uni.request({
            url: "https://api.qiancdj.com/index.php?i=666&m=longbing_massages_city&s=massage/app/Index/getUserFootprints&urls=massage/app/Index/getUserFootprints",
            header: {
                autograph: uni.getStorageSync("autograph"),
            },
            data: {
                shopFootprints: 1,
                serviceFootprints: 1,
            },
            success: (res) => {
                this.footprintlist = res.data.data;
            },
        });
    },
    onPullDownRefresh() {
        // #ifndef APP-PLUS
        uni.showNavigationBarLoading();
        // #endif
        this.initRefresh();
        uni.stopPullDownRefresh();
    },
    onReachBottom() {
        if (this.list.current_page >= this.list.last_page || this.loading)
            return;
        this.loading = true;
        this.getList(this.param.page + 1);
    },
    onShareAppMessage(e) {
        let { id: pid = 0 } = this.userInfo;
        let path = `/pages/service?pid=${pid}`;
        this.$util.log(path);
        return {
            title: "",
            imageUrl: "",
            path,
        };
    },
    methods: {
        showModal() {
            uni.showModal({
                title: "温馨提示",
                content: "本地生活服务暂未开通，敬请期待!",
                showCancel: false,
                confirmText: "我知道了",
                confirmColor: "#606acc",
            });
        },
        ...mapActions([
            "getConfigInfo",
            "getUserInfo",
            "updateCommonOptions",
            "getServiceIndex",
            "getServiceList",
        ]),
        ...mapMutations([
            "updateServiceItem",
            "updateTechnicianItem",
            "updateUserItem",
        ]),
        async initIndex(refresh = false) {
            let { pid = 0 } = this.options;
            if (!refresh && this.pageActive && !pid) {
                this.isLoad = true;
                this.loading = false;
                this.$util.hideAll();
                return;
            }

            let { isGzhLogin } = this;
            let { id: uid = 0 } = this.userInfo;
            if (pid && !uid) {
                // #ifdef H5
                if (isGzhLogin) {
                    setTimeout(() => {
                        this.getUserInfo();
                    }, 1000);
                } else {
                    this.getUserInfo();
                }
                // #endif
                // #ifndef H5
                await this.getUserInfo();
                // #endif
            }

            if (!this.configInfo.id || refresh) {
                await this.getConfigInfo();
            }

            let { location } = this;
            let { plugAuth = {} } = this.configInfo;
            let { recommend = false } = plugAuth;

            if (recommend && !location.lat) {
                // #ifdef H5
                if (this.$jweixin.isWechat()) {
                    this.$util.showLoading();
                    // await this.$jweixin.initJssdk();
                    await this.$jweixin.wxReady2();
                    let { latitude: lat = 0, longitude: lng = 0 } =
                        await this.$jweixin.getWxLocation();
                    location = {
                        lng: "126.56279",
                        lat: "45.80825",
                        address: "定位失败",
                        province: "",
                        city: "",
                        district: "",
                    };
                }
                // #endif
                // #ifndef H5
                if (uni.getStorageSync("appLogin") != "") {
                    location = await this.$util.getBmapLocation();
                }

                // #endif
                this.updateUserItem({
                    key: "location",
                    val: location,
                });
            }
            let { lng = 0, lat = 0 } = location;

            await this.getServiceIndex({
                lat,
                lng,
            });
            this.updateServiceItem({
                key: "pageActive",
                val: true,
            });
            this.isLoad = true;
            if (this.userInfo.id) {
                await Promise.all([this.getList(1), this.getCouponList()]);
            } else {
                await this.getList(1);
            }
        },
        initRefresh() {
            this.initIndex(true);
        },
        goRich(type) {
            uni.navigateTo({
                url: "/pages/rich?type=" + type,
            });
        },
        godetail(id) {
            uni.navigateTo({
                url: "/wNew/pages/detail?id=" + id,
            });
        },
        toAppShare() {
            let { id: pid = 0 } = this.userInfo;
            let title = "首页";
            let { siteroot } = siteInfo;
            let url = siteroot.split("/index.php")[0];
            let href = `${url}/h5/#/pages/service?pid=${pid}`;
            let imageUrl = "";
            this.$jweixin.wxReady(() => {
                this.$jweixin.showOptionMenu();
                this.$jweixin.shareAppMessage(title, "", href, imageUrl);
                this.$jweixin.shareTimelineMessage(title, href, imageUrl);
            });
        },
        // 轮播图/广告图跳转
        goBanner(e) {
            // connect_type 1查看大图，2文章
            console.log(e);
            if (e.connect_type == 1) {
                this.$util.previewImage({
                    current,
                    urls: [current],
                });
            } else if (e.connect_type == 2) {
                this.$util.goUrl({
                    url: `/user/pages/article?id=${id}`,
                });
            } else if (e.connect_type == 3) {
                this.$util.goUrl({
                    url: "/wNew/pages/fuwucate?id=" + e.type_id,
                });
            } else if (e.connect_type == 4) {
                this.$util.goUrl({
                    url: "/user/pages/detail?id=" + e.type_id,
                });
            }
            // switch (e.connect_type) {
            // 	case 1:
            // 		this.$util.previewImage({
            // 			current,
            // 			urls: [current]
            // 		})
            // 		break;
            // 	case 2:
            // 		this.$util.goUrl({
            // 			url: `/user/pages/article?id=${id}`
            // 		})
            // 		break;
            // 	case 3:
            // 		this.$util.goUrl({
            // 			url: '/wNew/pages/fuwucate?id='+e.type_id
            // 		})
            // 		break;
            // 	case 4:
            // 		this.$util.goUrl({
            // 			url: '/wNew/pages/fuwucate?id='+e.type_id
            // 		})
            // 		break;
            // }
        },
        goCate(e) {
            let { id, title, url: link = "" } = e;
            let url =
                link || `/user/pages/service/list?id=${id}&title=${title}`;
            this.$util.goUrl({
                url,
            });
        },
        async userGetCoupon() {
            let ids = [];
            this.couponList.forEach((v) => {
                ids.push(v.id);
            });
            let res = await this.$api.service.userGetCoupon({
                coupon_id: ids,
            });
            this.$util.showToast({
                title: `领取成功`,
            });
            setTimeout(() => {
                this.$util.goUrl({
                    url: "/user/pages/coupon/list",
                });
            }, 1000);
            this.$refs.coupon_item.close();
            this.loading = false;
            this.$util.hideAll();
        },
        async getCouponList() {
            let list = await this.$api.service.couponList();
            this.couponList = list;
            if (list.length > 0 && this.isLoad) {
                // this.$refs.coupon_item.open()
            }
            this.loading = false;
            this.$util.hideAll();
        },
        async getList(page = 0) {
            if (page) {
                let param = this.$util.deepCopy(this.param);
                param.page = page;
                this.updateServiceItem({
                    key: "param",
                    val: param,
                });
            }
            let { list: oldList, param, tabList, activeIndex } = this;
            let { sort, sign } = tabList[activeIndex];
            let desc = activeIndex == 0 || sign == 1 ? "" : "desc";
            param.sort = `${sort} ${desc}`;
            await this.getServiceList(param);
            this.loading = false;
            this.$util.hideAll();
        },
        handerTabChange(index) {
            this.updateServiceItem({
                key: "activeIndex",
                val: index,
            });
            let tabList = this.$util.deepCopy(this.tabList);
            let { is_sign, sign } = tabList[index];
            if (is_sign) {
                tabList[index].sign = sign == 0 ? 1 : 0;
            }
            this.updateServiceItem({
                key: "tabList",
                val: tabList,
            });

            this.$util.showLoading();
            uni.pageScrollTo({
                scrollTop: 0,
            });
            this.getList(1);
        },
        toTechnician(index) {
            let { id, city_id, coach_name } = this.recommend_list[index];
            this.updateTechnicianItem({
                key: "pageActive",
                val: false,
            });
            this.$util.goUrl({
                url: `/pages/technician?coach_id=${id}&coach_name=${coach_name}&city_id=${city_id}`,
                openType: `reLaunch`,
            });
        },
        ccc() {
            console.log(1213456);
            this.$util.goUrl({
                url: `/user/pages/service-info`,
            });
        },
        goClass(id) {
            if (id) {
                uni.navigateTo({
                    url: "/wNew/pages/classify?id=" + id,
                });
            } else {
                uni.navigateTo({
                    url: "/user/pages/detail?id=" + id,
                });
            }
        },
        foFuwu(id) {
            uni.navigateTo({
                url: "/user/pages/detail?id=" + id,
            });
        },
        goFoot(id, type, service_id) {
            if (type == "smfu") {
                uni.navigateTo({
                    url: "/user/pages/detail?id=" + service_id,
                });
            } else if (type == "shop") {
                uni.navigateTo({
                    url: "/wNew/pages/detail?id=" + id,
                });
            }
        },
    },
};
</script>


<style lang="scss">
@import url(@/components/common.css);

.pages-home {
    .search-box {
        width: 100%;
        bottom: 0;
        z-index: 9;
        overflow: hidden;
    }

    .recommend-technician {
        white-space: nowrap;
        width: 690rpx;

        .recommend-item {
            display: inline-block;
        }

        .recommend-item.type-1 {
            width: 180rpx;
            margin-left: 26rpx;

            .cover {
                width: 180rpx;
                height: 180rpx;
            }

            .ellipsis {
                max-width: 180rpx;
            }
        }

        .recommend-item.type-2 {
            width: 203rpx;
            height: 151rpx;
            background: #f4f6f7;
            border-radius: 12rpx;
            margin-left: 20rpx;

            .cover {
                width: 70rpx;
                height: 70rpx;
            }

            .ellipsis {
                max-width: 82rpx;
            }

            .iconyduixingxingshixin {
                font-size: 26rpx;
                background-image: -webkit-linear-gradient(
                    270deg,
                    #fad961 0%,
                    #f76b1c 100%
                );
            }

            .star-text {
                height: 26rpx;
                color: #ff9519;
                margin-left: 6rpx;
            }

            .new-technician {
                width: 67rpx;
                height: 30rpx;
                border-radius: 8rpx;
                transform: rotateZ(360deg);
            }
        }

        .recommend-item:nth-child(1) {
            margin-left: 0;
        }
    }

    .list-item {
        .cover {
            width: 180rpx;
            height: 180rpx;
        }

        .time-long {
            min-width: 72rpx;
            height: 30rpx;
            padding: 0 5rpx;
            background: linear-gradient(270deg, #4c545a 0%, #282b34 100%);
            border-radius: 4rpx;
            font-size: 20rpx;
            color: #ffeeb9;
            margin-right: 16rpx;
        }

        .f-icontext {
            font-size: 18rpx;
        }

        .text-delete {
            font-size: 24rpx;
            color: #b9b9b9;
        }

        .item-btn {
            width: 150rpx;
            height: 52rpx;
            border-radius: 100rpx;
        }
    }
}

.radius-top {
    border-radius: 30rpx 30rpx 0 0;
}

.coupon-popup {
    width: 658rpx;
    height: 865rpx;
    position: relative;

    .bg-img {
        width: 100%;
        height: 100%;
    }

    .icon-close {
        font-size: 60rpx;
        position: absolute;
        top: 50rpx;
        right: 60rpx;
        z-index: 999;
    }

    .coupon-info {
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;

        .tops {
            width: 480rpx;
            color: #fb4523;
            position: absolute;
            top: 260rpx;

            > view:nth-child(1) {
                font-weight: bold;
                font-size: 30rpx;
            }
        }

        .lists {
            width: 500rpx;
            height: 300rpx;
            padding: 10rpx;
            overflow-x: hidden;
            position: absolute;
            bottom: 222rpx;

            .list {
                width: 420rpx;
                height: 130rpx;
                margin-bottom: 10rpx;
                margin-top: 5rpx;
                position: relative;

                > image {
                    width: 100%;
                    height: 100%;
                }

                > view {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 8rpx;

                    > view:nth-child(1) {
                        width: 38%;
                    }

                    > view:nth-child(2) {
                        display: flex;
                        justify-content: center;
                        flex: 1;
                        padding: 0 15rpx;
                        box-sizing: border-box;
                    }

                    .price {
                        font-size: 30rpx;
                        color: #fb4523;
                    }

                    .title {
                        font-size: 30rpx;
                        line-height: 36rpx;
                        font-weight: bold;
                    }

                    .price_text {
                        color: #ccc;
                    }
                }
            }
        }
    }

    view.btns {
        width: 100%;
        position: absolute;
        height: 82rpx;
        bottom: 0rpx;
        left: 0;

        > view {
            width: 422rpx;
            height: 82rpx;

            border-radius: 40rpx;
            font-size: 34rpx;
            color: #ffffff;
        }
    }
}

.servetip {
    font-size: 28rpx;
    font-weight: 400;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 22rpx 0;
}

.servefc {
    display: flex;
    align-items: center;
}

.van-image {
    position: relative;
    display: inline-block;
}

.van-img {
    width: 100%;
    height: 100%;
}

.margin-20 {
    margin: 0.53333rem;
}

.line {
    width: 10rpx;
    height: 30rpx;
    background: #f76b1c;
}

.align-center {
    align-items: center;
}

.classify {
    background: #fff;
    margin-top: 20rpx;
    padding: 30rpx 58rpx 6rpx;
    border-radius: 20rpx;
    position: relative;
    z-index: 1;

    .cla_item {
        font-size: 24rpx;
        color: #333;
        z-index: 999;
        margin-right: 60rpx;
        margin-bottom: 24rpx;

        &:nth-child(4n) {
            margin-right: 0;
        }

        image {
            width: 80rpx;
            height: 80rpx;
            margin-bottom: 12rpx;
        }
    }
}

.titimg {
    width: 36rpx;
    height: 36rpx;
}

.flimg {
    width: 156rpx;
    height: 198rpx;
    border-radius: 10rpx;
}

.listbox {
    width: 720rpx;
    column-count: 2;
    column-gap: 0;
    margin-top: 20rpx;
    overflow: hidden;
    box-sizing: border-box;
}

.demo-warter {
    border-radius: 8px;
    margin-bottom: 15rpx;
    background-color: #ffffff;
    padding: 8px;
    position: relative;
    width: 345rpx;
    display: inline-block;
}

.demo-image {
    width: 100%;
    border-radius: 4px;
}

.demo-title {
    // font-size: 30rpx;
    // margin-top: 5px;
    // color: $u-main-color;
}

.demo-tag {
    display: flex;
    margin-top: 5px;
}

.demo-tag-owner {
    background-color: $u-type-error;
    color: #ffffff;
    display: flex;
    align-items: center;
    padding: 4rpx 14rpx;
    border-radius: 50rpx;
    font-size: 20rpx;
    line-height: 1;
}

.demo-tag-text {
    border: 1px solid #f43000;
    color: #f43000;
    margin-right: 8px;
    line-height: 1;
    padding: 8rpx 24rpx 8rpx 24rpx;
    display: flex;
    align-items: center;
    border-radius: 4rpx;
    font-size: 20rpx;
}

.demo-tag-text-grey {
    border: 1px solid #999;
    color: #999;
}

.mark {
    font-size: 20rpx;
    color: #fff;
    padding: 6rpx 10rpx;
    background: #606dce;
    border-radius: 4rpx;
    margin-right: 20rpx;
}

.markOra {
    background: #ef5205;
}

.demo-price {
    font-size: 30rpx;
    color: $u-type-error;
    margin-top: 5px;
    font-weight: bold;
    font-size: 32rpx;

    text {
        font-size: 20rpx;
    }

    .demo-price-grey {
        color: #d3d3d3;
        font-size: 20rpx;
        font-weight: 400;
        margin-left: 18rpx;
        text-decoration: line-through;
    }
}

.demo-shop {
    font-size: 22rpx;
    color: $u-tips-color;
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    image {
        width: 20rpx;
        height: 20rpx;
        margin-right: 8rpx;
    }
}

.zbimg {
    width: 24rpx;
    height: 20rpx;
}

.amimg {
    width: 176rpx;
    height: 176rpx;
    border-radius: 10rpx;
}

.amtime {
    // width: 74rpx;
    height: 28rpx;
    background: linear-gradient(269deg, #4f5052 0%, #101010 100%);
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    padding: 0 6rpx;
    font-size: 20rpx;
    color: #f2f1d2;
    line-height: 28rpx;
}

.amdetail {
    width: 140rpx;
    height: 52rpx;
    background: #606dce;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    font-size: 26rpx;
    color: #ffffff;
    line-height: 52rpx;
    text-align: center;
}

.shimg {
    width: 184rpx;
    height: 184rpx;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
}

.topbar {
    position: fixed;
    background: linear-gradient(180deg, #5d64ca 0%, #6f9bdf 100%);
    // background: #abe7ac;
    text-align: center;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    font-size: 32rpx;
    padding-top: 90rpx;
    color: #fff;
    width: 100%;
    z-index: 999;
}

.aaa-item {
    width: 156rpx;
    height: 198rpx;
    position: relative;

    .name {
        position: absolute;
        left: 0;
        width: 156rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
    }

    .aaa-one {
        bottom: 22rpx;
        color: #333;
    }

    .aaa-two {
        top: 30rpx;
        color: white;
    }
}
.topT {
    padding: 26rpx 0;
    text-align: center;
    color: white;
    border-radius: 10rpx;
    // 三色渐变 #4be485 #8efa97 #4be485
    background: linear-gradient(270deg, #81a3e3, #5d65ca, #81a3e3);
}

/deep/uni-modal,
/deep/ .uni-modal {
    border-radius: 20rpx !important;
}
</style>